<template>
  <div class="mod-prod prod-list-mod">
    <!-- 查询和其他操作 -->
    <div class="search-bar">

      <el-form :inline="true" label-width="auto" class="search-form" size="small">

        <div class="input-row">

          <el-form-item label="店铺名称">
            <el-input
              clearable
              @keyup.enter.native="handleFind"
              class="filter-item"
              style="width: 200px;"
              v-model="shopName"
              placeholder="请输入店铺名"
            ></el-input>
          </el-form-item>
          <el-form-item label="链名称">
            <el-input
              clearable
              @keyup.enter.native="handleFind"
              class="filter-item"
              style="width: 200px;"
              v-model="chainName"
              placeholder="请输入链名"
            ></el-input>
          </el-form-item>
          <div class="default-btn primary-btn" @click="handleFind">{{$t('crud.searchBtn')}}</div>
          <div class="default-btn" @click="resetList">{{$t('product.reset')}}</div>



        </div>
      </el-form>
    </div>

    <div class="main-container">
      <div class="table-con prod-table">
        <el-table :data="dataList" header-cell-class-name="table-header" row-class-name="table-row-low"
                  row-key="id" style="width: 100%;">
          <el-table-column prop="chainName"  align="left"
                           :label="this.$i18n.t('shopChainApply.chainName')">
            <template slot-scope="scope">
              <span class="table-cell-text line-clamp-one">{{ scope.row.chainName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="left" :label="this.$i18n.t('shopChainApply.shopName')">
            <template slot-scope="scope">
              <span  class="tag-text">{{ scope.row.shopName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="left" :label="this.$i18n.t('shopChainApply.createTime')">
            <template slot-scope="scope">
              <span  class="tag-text">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" align="left" :label="this.$i18n.t('shopChainApply.updateTime')">
            <template slot-scope="scope">
              <span  class="tag-text">{{ scope.row.updateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" align="left" :label="this.$i18n.t('shopChainApply.resson')" show-overflow-tooltip>
            <template slot-scope="scope">
              <span  class="tag-text">{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="left" :label="this.$i18n.t('shopChainApply.status')">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 1" class="tag-text">{{ $t("shopChainApply.status1") }}</span>
              <span v-if="scope.row.status === 2" class="tag-text">{{ $t("shopChainApply.status2") }}</span>
              <span v-if="scope.row.status === 3" class="tag-text">{{ $t("shopChainApply.status3") }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" :label="this.$i18n.t('shopChainApply.operate')">
            <template slot-scope="scope">
              <div class="text-btn-con">
                <div class="default-btn text-btn" v-if="scope.row.status == 1"
                     @click="handleEdit(scope.row)">{{ $t("shopChainApply.edit") }}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--分页-->
    <div class="block">
      <!-- <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->

      <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination> -->
      
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"></el-pagination>

    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="原因" :label-width="formLabelWidth" prop="sort">
          <el-input v-model="form.remark" placeholder="请输入50字内的审核原因" maxlength="50" auto-complete="off" @input="changeFn"  clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="submitForm(1)">驳回</el-button>
        <el-button type="primary" @click="submitForm(2)">通过</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataForm: {},
      dataList: [],
      shopName: '',
      chainName: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条,
      },
      title: '审核',
      dialogFormVisible: false, // 控制弹出框
      formLabelWidth: '120px',
      form: {
        id: null,
        remark: null,
        status: null
      }
    }
  },
  created () {
    this.tagList(this.page)
  },

  methods: {
    tagList: function (page) {
      var params = {}
      params.shopName = this.shopName
      params.chainName = this.chainName
      params.pageIndex = this.page.currentPage
      params.pageSize = this.page.pageSize
      console
      this.$http({
        url: this.$http.adornUrl(
          `/admin/shopChainApply/list?size=${this.page.pageSize}&current=${this.page.currentPage}`
        ),
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.size = data.size
        this.page.total = data.total;
      })
    },
    handleFind: function () {
      this.currentPage = 1
      this.tagList(this.page)
    },
    handleEdit: function (row) {
      this.title = '审核'
      this.dialogFormVisible = true
      this.form = row
    },

    //分页按钮
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.tagList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.tagList(this.page);
    },

    submitForm: function (type) {
      if (type == 1 && !this.form.remark) {
        this.$message({
          message: '填写驳回原因',
          type: 'warning',
          duration: 1500
        })
        return
      }
      if (type == 1) {
        this.form.status = 3
      } else {
        this.form.status = 2
      }
      this.$http({
        url: this.$http.adornUrl('/admin/shopChainApply'),
        method: 'put',
        data: this.$http.adornData({'id': this.form.id, 'remark': this.form.remark, 'status': this.form.status})
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            this.dialogFormVisible = false
            this.tagList()
          }
        })
      })
    },

    // 重置
    resetList () {
      this.shopName = ''
      this.chainName = ''
      this.tagList()
    },
    changeFn (value) {
      let len = 0, j = 0 // len为字节数,j为字符数
      for (var i = 0; i < value.length; i++) {
        // charCodeAt(i)返回value第i个的UNcode值
        if (value.charCodeAt(i) > 127 || value.charCodeAt(i) == 94) {
          len += 2
          j++
        } else {
          len++
          j++
        }
        if (len > 50) {
          this.$message('原因最多只能输入25个汉字')
          this.form.remark = value.substring(0, j - 1)
          break
        }
      }
    }
  }
}
</script>
